<template>
  <div class="TablePlug" :class="[isFullScreen?'is-full-screen':'']" :ref="pageId">
    <div class="top" v-if="!config.hiddenSearchBar">
      <slot name="header">
        <div class="top_search">
          <slot name="headerSearch">
            <el-popover
                placement="bottom-start"
                width="150"
                trigger="click">
              <div class="showColumnList">
                <div class="showColumnList_title">请选择列表中要展示的信息</div>
                <template v-for="item in config.column" v-bind:key="item.prop">
                  <div class="showColumnList_li" v-if="item.tableHeaderShow">
                    <el-checkbox v-model="item.tableShow">{{ item.label }}</el-checkbox>
                  </div>
                </template>
              </div>
              <template #reference>
                <div class="top_search_btn">
                  <el-button size="mini" icon="vbl-list vbl" class="is_tool_btn"></el-button>
                </div>
              </template>
            </el-popover>
            <div class="top_search_btn" v-if="config.showRefresh">
              <el-button size="mini" icon="el-icon-refresh-right"  class="is_tool_btn" style="font-size: 16px;" v-on:click="reload()"></el-button>
            </div>
            <div class="top_search_btn" v-if="config.showFullScreen">
              <el-button size="mini" :icon="isFullScreen?'vbl vbl-tuichuquanping':'vbl vbl-tubiaozhizuomoban-'"  class="is_tool_btn" style="font-size: 16px;" v-on:click="changeFullscreenEvent()"></el-button>
            </div>
            <slot name="headerSearch-prepend"></slot>
            <slot name="headerSearch-center">
              <template v-for="item in config.column||[]" v-bind:key="item.prop">
                <div class="top_search_span" v-if="item.search && item.search.show">
                  <div class="top_search_span_label" v-if="!item.search.hiddenLabel">{{
                      item.search.label || item.label
                    }}
                  </div>
                  <div class="top_search_span_input" :style="{'width': item.search.width + 'px'}">
                    <el-select size="small" v-if="item.type === 'radio' || item.type === 'select' || item.type === 'checkbox'"
                               v-model="searchForm[item.search.prop||item.prop]"
                               clearable
                               :placeholder="item.search.placeholder || ('请选择' + (item.search.label || item.label))">
                      <el-option :label="l[item.dicLabel]" v-for="l in item.dicData" :value="l[item.dicId]"
                                 v-bind:key="l.id"></el-option>
                    </el-select>
                    <el-select size="small" v-else-if="item.type === 'switch'"
                               v-model="searchForm[item.search.prop||item.prop]"
                               clearable
                               :placeholder="item.search.placeholder || ('请选择' + (item.search.label || item.label))">
                      <el-option :label="item.effectTrueLabel || '有效'" :value="true"></el-option>
                      <el-option :label="item.effectFalseLabel || '无效'" :value="false"></el-option>
                    </el-select>
                    <el-select size="small" v-else-if="item.type === 'status' && config.status.show"
                               v-model="searchForm[item.search.prop||item.prop]"
                               clearable
                               :placeholder="item.search.placeholder || ('请选择' + (item.search.label || item.label))">
                      <el-option :label="l.label" v-for="l in config.status.list" :value="l.id"
                                 v-bind:key="l.id"></el-option>
                    </el-select>
                    <el-cascader size="small" v-else-if="item.type === 'tree'"
                                 v-model="searchForm[item.search.prop||item.prop]"
                                 clearable style="width: 100%"
                                 :placeholder="item.search.placeholder || ('请选择' + (item.search.label || item.label))"
                                 :options="item.dicData" :props="item.treeProps">
                    </el-cascader>
                    <el-date-picker size="small" :style="{'width': item.search.width + 'px'}" class="date-picker" clearable v-else-if="item.type === 'date'"
                                    :placeholder="item.search.placeholder || ('请选择' + (item.search.label || item.label))"
                                    start-placeholder="开始时间" end-placeholder="结束时间"
                                    v-model="searchForm[item.search.prop||item.prop]"
                                    :type="getSearchDateType(item.form.dateType)"
                                    :format="item.form.valueFormat"
                                    :value-format="item.form.valueFormat">
                    </el-date-picker>
                    <el-input type="number" v-model="searchForm[item.search.prop||item.prop]" clearable
                              :placeholder="item.search.placeholder || ('请输入' + (item.search.label || item.label))"
                              v-else-if="item.type === 'number' || item.type === 'inputNumber'"
                              size="small"></el-input>
                    <el-input v-model="searchForm[item.search.prop||item.prop]" clearable
                              :placeholder="item.search.placeholder || ('请输入' + (item.search.label || item.label))" v-else
                              size="small"></el-input>
                  </div>
                </div>
              </template>
            </slot>
            <slot name="headerSearch-append" v-bind:searchForm="searchForm"></slot>
            <div class="top_search_btn">
              <slot name="headerSearch-btn" v-bind:searchForm="searchForm">
                <slot name="headerSearch-btn-prepend" v-bind:searchForm="searchForm"></slot>
                <el-button size="small" icon="el-icon-search" v-if="hasSearchItem(config.column||[])" plain type="warning" v-on:click="reload()">搜索</el-button>
                <slot name="headerSearch-btn-append" v-bind:searchForm="searchForm"></slot>
              </slot>
            </div>
          </slot>
        </div>
        <div class="top_btn">
          <slot name="headerBtn" v-bind="bindData()">
            <slot name="headerBtn-prepend"></slot>
            <el-button size="small" icon="el-icon-plus" type="primary" v-on:click="openDialog()" v-if="config.addBtn">新增
            </el-button>
            <el-button size="small" icon="el-icon-upload2" type="warning" v-on:click="$refs.importDialog.open()"
                       v-if="config.import.show">导入
            </el-button>
            <slot name="headerBtn-append"></slot>
          </slot>
        </div>
      </slot>
    </div>
    <div class="center" v-loading="pageLoading">
      <slot name="table">
        <el-table style="width: 100%"
                  :data="tableData"
                  :stripe="config.stripe"
                  :height="isFullScreen?calcTableHeight:(tableHeightRef||config.height||calcTableHeight)"
                  :max-height="config['max-height']"
                  :size="config.size"
                  :fit="config.fit"
                  :show-header="config['show-header']"
                  :highlight-current-row="config['highlight-current-row']"
                  :current-row-key="config['current-row-key']"
                  :row-key="config.rowKey"
                  :empty-text="config.emptyText"
                  :default-expand-all="config['default-expand-all']"
                  :tree-props="{children: 'children'}"
                  @selection-change="onTableSelectionChangeEvent"
                  @row-dblclick="onTableRowDbClickEvent"
                  :border="config.border">
          <slot name="table-selection">
            <el-table-column width="50" align="center" type="selection" v-if="config.selection"></el-table-column>
          </slot>
          <el-table-column width="50" align="center" type="index" v-if="config.index" label="#"></el-table-column>
          <template v-for="item in sortColumn(config.column||[])" v-bind:key="item.prop">
            <el-table-column v-if="item.tableShow" :prop="item.prop"
                             :label="item.label + (item.form.appendLabel?'\n'+item.form.appendLabel:'')"
                             :width="item.width||0"
                             :show-overflow-tooltip="item.showOverflowTooltip" :min-width="item.minWidth||null"
                             :sortable="item.sortable"
                             :align="item.align">
              <template #default="scope">
                <slot :name="'table-' + item.prop" v-bind:row="scope.row">
                  <span class="table_column_span" :class="item.href?'is-href':''"
                       v-on:click="onClickColumnEvent(item, scope.row)">
                    <template v-if="item.showProp">
                      {{
                        scope.row[item.showProp] && scope.row[item.showProp].constructor == Object ? scope.row[item.showProp][item.dicLabel] : getLabelByPropKey(scope.row, item)
                      }}
                    </template>
                    <template v-else-if="item.type === 'radio'">
                      <span :class="[item.form.multiple?('tableSpan ' + item.form.spanClass):'', v.spanClass||'']"
                            v-for="v in getDicItem(item, scope.row[item.prop])" v-bind:key="v">{{ v.label }}</span>
                    </template>
                    <span v-else-if="item.type === 'switch'"
                          :class="'tableSpan ' + (scope.row[item.prop]?'effectSpan':'disabledSpan')">{{
                        scope.row[item.prop] ? (item.effectTrueLabel || '有效') : (item.effectFalseLabel || '无效')
                      }}</span>
                    <template v-else-if="item.type === 'select'">
                      <span :class="[item.form.multiple?('tableSpan ' + item.form.spanClass):'', (v.spanClass||'')]"
                            v-for="v in getDicItem(item, getLabelByPropKey(scope.row, item))" v-bind:key="v">{{v.label}}</span>
                    </template>
                    <template v-else-if="item.type === 'tree' && item.treeProps && item.treeProps.multiple">
                      <span class="tableSpan" :class="[item.form.spanClass, v.spanClass||'']"
                          v-for="v in getDicItem(item, getLabelByPropKey(scope.row, item))" v-bind:key="v">{{
                        v.label
                      }}</span>
                    </template>
                    <div class="labelsTablePanel" v-else-if="item.type === 'labels'">
                      <div class="labelsTablePanel_span" v-for="v in getLabelByPropKey(scope.row, item)"
                           :style="{'color': v.color||null, 'background-color': v.bgColor||null}"
                           v-bind:key="v">{{ v.label || v }}
                      </div>
                    </div>
                    <span v-else-if="item.type === 'icon'" class="tableIcon" :class="scope.row[item.prop]"></span>
                    <span v-else-if="item.type === 'image'" class="tableImage">
                      <img :src="scope.row[item.url]"/>
                    </span>
                    <template v-else-if="item.type === 'status' && config.status.show">
                      <el-tooltip class="item" effect="dark"
                                  :disabled="!item.statusRemarkProp || !scope.row[item.statusRemarkProp]"
                                  :content="scope.row[item.statusRemarkProp]" placement="top">
                    <span class="tableSpan tableStatus"
                          :class="getStatusItem(config.status.list, scope.row[item.prop], 'class')">{{
                        getStatusItem(config.status.list, scope.row[item.prop], 'label')
                      }}</span>
                      </el-tooltip>
                    </template>
                    <span v-else>{{ getLabelByPropKey(scope.row, item) }}</span>
                  </span>
                </slot>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="操作" v-if="!config.hiddenHandleMenu" :width="config.menuWidth||120"
                           :fixed="config.handleColumnFixed||false">
            <template #default="scope">
              <slot name="table-handle-prepend" v-bind:row="scope.row"></slot>
              <slot name="table-handle" v-bind:row="scope.row">
                <template v-for="item in config.handleBtnList" v-bind:key="item.key">
                  <el-button type="text" class="tableBtn okBtn" :icon="item.icon"
                             v-if="item.show && item.key === 'edit' && tableBtnIsShow(item, scope.row)"
                             v-on:click="updateDialogEvent(scope.row)">编辑
                  </el-button>
                  <el-button type="text" class="tableBtn deleteBtn" :icon="item.icon"
                             v-else-if="item.show && item.key === 'delete' && tableBtnIsShow(item, scope.row)"
                             v-on:click="onDeleteEvent(scope.row)">删除
                  </el-button>
                  <template v-else>
                    <slot :name="'table-handle-' + item.label" v-bind:row="scope.row">
                      <el-button :type="item.type" class="tableBtn" :style="{'color': item.color}" :icon="item.icon"
                                 v-if="item.show && tableBtnIsShow(item, scope.row)"
                                 v-on:click="item.callback(scope.row)">{{ item.label }}
                      </el-button>
                    </slot>
                  </template>
                </template>
              </slot>
              <slot name="table-handle-append" v-bind:row="scope.row"></slot>
            </template>
          </el-table-column>
          <template #empty>
            <div class="tableEmpty">
              <div class="tableEmpty_img"></div>
              <div class="tableEmpty_label">{{ config['empty-text'] || '暂无数据' }}</div>
            </div>
          </template>
        </el-table>
      </slot>
    </div>
    <div class="footer">
      <slot name="footer" v-bind:searchResult="searchResult">
        <div class="footer_btn">
          <slot name="footerBtn" v-bind:searchResult="searchResult">
            <slot name="footerBtn-prepend" v-bind:selectData="selectData" v-bind:searchResult="searchResult"></slot>
            <template v-for="item in config.multipleBtnList" v-bind:key="item.key">
              <el-button size="small" icon="el-icon-delete" type="danger"
                         :disabled="selectData.length <= 0" plain
                         v-if="item.key === 'delete' && tableMutipleBtnIsShow(item)"
                         v-on:click="onDeleteManyEvent">删除
              </el-button>
              <el-button size="small" :type="item.type" plain :icon="item.icon" v-else-if="tableMutipleBtnIsShow(item)"
                         :disabled="selectData.length <= 0 || (Object.prototype.hasOwnProperty.call(item, 'fDisabled') && item.fDisabled(selectData, tableData))"
                         v-on:click="onMultipleHandleEvent(item)">{{ item.label }}
              </el-button>
            </template>
            <slot name="footerBtn-append" v-bind:selectData="selectData" v-bind:searchResult="searchResult"></slot>
          </slot>
        </div>
        <div class="footer_page" v-if="config.page.show">
          <slot name="footerPage">
            <el-pagination
                @current-change="reload($event-1, true)"
                @size-change="pageSizeChange"
                :small="config.page.small"
                :background="config.page.background"
                :page-size="config.page.pageSize"
                :page-sizes="config.page.pageSizes"
                :total="config.page.total"
                :layout="config.page.layout"
                :pager-count="config.page['pageCount']"
                :current-page="config.page['current-page']"
                :default-current-page="3"
                :disabled="config.page.disabled"
                :hide-on-single-page="config.page['hide-on-single-page']"
                :prev-text="config.page['prev-text']"
                :next-text="config.page['next-text']">
            </el-pagination>
          </slot>
        </div>
      </slot>
    </div>
    <el-dialog :title="submitType==='update'?'编辑':'新增'" v-model="showDialog" :width="config.form.width"
               :append-to-body="true"
               @closed="closeDialogEvent()"
               @opened="openDialogEvent()"
               :close-on-press-escape="config.form.closeOnPressEscape"
               :close-on-click-modal="config.form.closeOnClickModel">
      <div class="tableForm" v-if="showDialog" v-loading="detailLoading">
        <el-form ref="form" :rules="formRules" :model="tableForm" :label-width="config.form.labelWidth + 'px'"
                 :size="config.form.size">
          <el-row :gutter="20">
            <template v-for="item in config.column||[]" v-bind:key="item.prop">
              <div class="split" v-if="item.type === 'split'">
                <div class="split_icon" v-if="item.icon"></div>
                <div class="split_label" v-if="item.label">{{ item.label }}</div>
              </div>
              <template v-else>
                <el-col :span="item.form.span"
                        v-if="item.formShow && (item.form.vIf&&item.form.vIf(item, tableForm, submitType === 'update'))">
                  <el-form-item :label="item.label" :prop="item.prop">
                    <slot :name="'form-' + item.prop" v-bind:form="tableForm">
                      <template v-if="item.form.jsxHtml">
                        <div v-html="item.form.jsxHtml"></div>
                      </template>
                      <template v-else>
                        <el-radio-group v-model="tableForm[item.prop]"
                                        v-if="item.type === 'radio'"
                                        @change="onChangeSelectEvent($event, item, tableForm)"
                                        :disabled="item.form.disabled(tableForm, submitType === 'update')">
                          <template v-if="item.radioButton">
                            <el-radio-button :label="radio[item.dicId||'id']" v-for="radio in item.dicData"
                                             v-bind:key="radio.id">
                              {{ radio[item.dicLabel || 'label'] }}
                            </el-radio-button>
                          </template>
                          <template v-else>
                            <el-radio :label="radio[item.dicId||'id']" v-for="radio in item.dicData"
                                      v-bind:key="radio.id">
                              {{ radio[item.dicLabel || 'label'] }}
                            </el-radio>
                          </template>
                        </el-radio-group>
                        <el-cascader style="width: 100%" v-model="tableForm[item.prop]" clearable
                                     :disabled="item.form.disabled(tableForm, submitType === 'update')"
                                     :placeholder="item.form.placeholder || ('请选择'+item.label)"
                                     v-else-if="item.type === 'tree'"
                                     @change="onChangeSelectEvent($event, item, tableForm)"
                                     :options="item.dicData" :props="item.treeProps"></el-cascader>
                        <el-input type="textarea" :rows="item.form.rows||2"
                                  :disabled="item.form.disabled(tableForm, submitType === 'update')"
                                  :placeholder="item.form.placeholder || ('请输入'+item.label)"
                                  v-else-if="item.type === 'textarea'" v-model="tableForm[item.prop]">
                        </el-input>
                        <el-switch v-else-if="item.type === 'switch'" v-model="tableForm[item.prop]"
                                   :disabled="item.form.disabled(tableForm, submitType === 'update')"></el-switch>
                        <el-input-number :placeholder="item.label" v-else-if="item.type === 'inputNumber'"
                                         :disabled="item.form.disabled(tableForm, submitType === 'update')"
                                         v-model="tableForm[item.prop]"></el-input-number>
                        <el-select style="width: 100%" v-else-if="item.type === 'select'"
                                   :filterable="item.form.filterable"
                                   :remote="item.form.remote"
                                   clearable
                                   :remote-method="(query)=>{onRemoteMethodEvent(query, item)}"
                                   :placeholder="item.form.placeholder || ('请选择'+item.label)"
                                   :disabled="item.form.disabled(tableForm, submitType === 'update')"
                                   :multiple="item.form.multiple"
                                   @change="onChangeSelectEvent($event, item, tableForm)"
                                   v-model="tableForm[item.prop]">
                          <template v-if="item.dicKey && item.dicType === 'dicKey'">
                            <el-option v-for="dic in item.dicData" v-bind:key="dic.key" :label="dic.name"
                                       :value="dic.key"></el-option>
                          </template>
                          <template v-else>
                            <el-option v-for="dic in item.dicData" v-bind:key="dic.id" :label="dic[item.dicLabel]"
                                       :value="dic[item.dicId]"></el-option>
                          </template>
                        </el-select>
                        <el-checkbox-group v-model="tableForm[item.prop]" v-else-if="item.type === 'checkbox'">
                          <template v-if="item.dicKey && item.dicType === 'dicKey'">
                            <el-checkbox v-for="dic in item.dicData" :label="dic.key">{{ dic.name }}</el-checkbox>
                          </template>
                          <template v-else>
                            <el-checkbox v-for="dic in item.dicData" :label="dic[item.dicId]">{{ dic[item.dicLabel] }}</el-checkbox>
                          </template>
                        </el-checkbox-group>
                        <el-input :disabled="item.form.disabled(tableForm, submitType === 'update')" clearable
                                  :placeholder="item.form.placeholder || ('请输入'+item.label)"
                                  v-else-if="item.type === 'icon'" v-model="tableForm[item.prop]">
                          <template #prepend v-if="tableForm[item.prop]">
                            <el-button :icon="tableForm[item.prop]"></el-button>
                          </template>
                          <template #append>
                            <el-button type="text" icon="el-icon-plus"
                                       v-on:click="$refs.iconDialog.open(tableForm, item.prop)" style="padding: 0 10px;">
                              选择图标
                            </el-button>
                          </template>
                        </el-input>
                        <el-input type="number" :disabled="item.form.disabled(tableForm, submitType === 'update')"
                                  clearable
                                  :placeholder="item.form.placeholder || ('请输入'+item.label)"
                                  v-else-if="item.type === 'number'" v-model="tableForm[item.prop]">
                          <template #prepend v-if="item.form.prependLabel">{{ item.form.prependLabel }}</template>
                          <template #append v-if="item.form.appendLabel">{{ item.form.appendLabel }}</template>
                        </el-input>
                        <el-date-picker style="width: 100%" clearable
                                        :disabled="item.form.disabled(tableForm, submitType === 'update')"
                                        :placeholder="item.form.placeholder || ('请选择'+item.label)"
                                        start-placeholder="开始时间" end-placeholder="结束时间"
                                        v-else-if="item.type === 'date'"
                                        v-model="tableForm[item.prop]"
                                        :default-value="tableForm[item.prop] || new Date()"
                                        :type="item.form.dateType"
                                        :format="item.form.valueFormat"
                                        :value-format="item.form.valueFormat">
                        </el-date-picker>
                        <template v-else-if="item.type === 'image'">
                          <SelectImg v-model="tableForm[item.prop]" v-model::url="tableForm[item.url]"
                                     :multiple="item.form.multiple||false" :maxLength="item.form.maxLength"></SelectImg>
                        </template>
                        <template v-else-if="item.type === 'location'">
                          <el-input disabled :placeholder="tableForm[item.prop]?tableForm[item.prop].address:'选择位置信息'"
                                    class="input-with-select">
                            <template #append>
                              <el-button icon="el-icon-location"
                                         v-on:click="$refs.locationDialog.open({key: item.prop, val:tableForm[item.prop]})"></el-button>
                            </template>
                          </el-input>
                        </template>
                        <template v-else-if="item.type === 'status' && config.status.show">
                          <el-select size="small" v-model="tableForm[item.prop]" clearable style="width: 100%"
                                     :placeholder="item.form.placeholder || ('请选择'+item.label)">
                            <el-option :label="l.label" v-for="l in config.status.list" :value="l.id"
                                       v-bind:key="l.id"></el-option>
                          </el-select>
                        </template>
                        <template v-else-if="item.type === 'labels'">
                          <div class="labelsPanel">
                            <div class="labelsPanel_list">
                              <div class="labelsPanel_list_span"
                                   :style="{'color': item.form.labelColor?label.color:null, 'background-color': item.form.labelColor?label.bgColor:null}"
                                   v-for="(label, labelIndex) in tableForm[item.prop]" v-bind:key="label">
                                <template v-if="item.form.labelColor">
                                  <el-popover placement="top-start"
                                              title="设置颜色"
                                              :width="240"
                                              trigger="click">
                                    <div class="labelsPopover">
                                      <div class="labelsPopover_list">
                                        <div class="labelsPopover_list_s" v-bind:key="color"
                                             v-for="color in labelInitColors"
                                             v-on:click="label.bgColor=color.bgColor;label.color=color.color"
                                             :style="{'color': color.color, 'background': color.bgColor}">标签
                                        </div>
                                      </div>
                                      <div class="labelsPopover_form">
                                        <div class="labelsPopover_li">
                                          <div class="labelsPopover_li_name">背景色</div>
                                          <div class="labelsPopover_li_value">
                                            <el-color-picker v-model="label.bgColor" size="mini"></el-color-picker>
                                          </div>
                                        </div>
                                        <div class="labelsPopover_li">
                                          <div class="labelsPopover_li_name">字体色</div>
                                          <div class="labelsPopover_li_value">
                                            <el-color-picker v-model="label.color" size="mini"></el-color-picker>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <template #reference>
                                      <div class="labelsPanel_list_span_b">
                                        <div class="labelsPanel_list_span_label">
                                          {{ item.form.labelColor ? label.label : label }}
                                        </div>
                                        <div class="labelsPanel_list_span_close el-icon-error"
                                             v-on:click="tableForm[item.prop].splice(labelIndex, 1)"></div>
                                      </div>
                                    </template>
                                  </el-popover>
                                </template>
                                <div class="labelsPanel_list_span_b" v-else>
                                  <div class="labelsPanel_list_span_label">
                                    {{ label }}
                                  </div>
                                  <div class="labelsPanel_list_span_close el-icon-error"
                                       v-on:click="tableForm[item.prop].splice(labelIndex, 1)"></div>
                                </div>
                              </div>
                            </div>
                            <div class="labelsPanel_input">
                              <el-input type="text" v-model="labelInputVal"
                                        :disabled="item.form.disabled(tableForm, submitType === 'update')"
                                        @keyup.enter="onConfirmAddLabelEvent(item.prop, item.form.labelColor)"
                                        :placeholder="item.form.placeholder || '回车添加标签'"></el-input>
                            </div>
                          </div>
                        </template>
                        <el-input :placeholder="item.form.placeholder || ('请输入'+item.label)" v-else
                                  :type="item.inputType || 'input'"
                                  :disabled="item.form.disabled(tableForm, submitType === 'update')" clearable
                                  v-model="tableForm[item.prop]">
                          <template #prepend v-if="item.form.prependLabel">{{ item.form.prependLabel }}</template>
                          <template #append v-if="item.form.appendLabel">{{ item.form.appendLabel }}</template>
                        </el-input>
                      </template>
                    </slot>
                  </el-form-item>
                </el-col>
              </template>
            </template>
          </el-row>
        </el-form>
      </div>
      <div class="tableFoolter">
        <slot name="form-footer" v-bind:form="tableForm">
          <el-button size="small" type="primary" v-on:click="onSubmitEvent" v-loading="formLoading">确定</el-button>
          <el-button size="small" type="default" v-on:click="closeDialogEvent()" v-loading="formLoading">取消</el-button>
        </slot>
      </div>
    </el-dialog>
    <IconDialog ref="iconDialog"></IconDialog>
    <ImportDialog ref="importDialog" :downLoadTempUrl="config.import.tempFilePath"
                  v-on:importEvent="onImportEvent"></ImportDialog>
    <LocationDialog ref="locationDialog" v-on:success="onSelectLocationEvent"></LocationDialog>
  </div>
</template>

<script>
import $ from "jquery"
import TableStepMixin from "../../../js/tableStep"
import IconDialog from "../dialog/IconDialog.vue"
import ImportDialog from "../dialog/ImportDialog.vue"
import SelectImg from "../common/SelectImg.vue"
import LocationDialog from "../common/LocationDialog.vue"
// import dayjs from "dayjs"
import {reactive, ref, getCurrentInstance, onMounted} from 'vue';

export default {
  mixins: [],
  components: {
    IconDialog,
    ImportDialog,
    SelectImg,
    LocationDialog
  },
  data() {
    return {
      pageId: 'table_' + new Date().getTime(),
      calcTableHeight: 0,
    }
  },
  props: {
    option: Object,
    tableHeight: String
  },
  computed: {
    getDicItem() {
      return function (item, val) {
        let dicData = item.dicData || []
        let dicId = item.dicId
        let dicLabel = item.dicLabel
        let valList = []
        if (val) {
          if ((item.form.multiple || (item.treeProps && item.treeProps.multiple)) && Array.isArray(val)) {
            val.forEach(v => {
              let find = dicData.find(item => {
                return item[dicId] === v
              })
              if (find) {
                valList.push({
                  label: find[dicLabel],
                  spanClass: find.spanClass
                })
              }
            })
          } else {
            let find = dicData.find(item => {
              return item[dicId] === val
            })
            if (find) valList = [{
              label: find[dicLabel],
              spanClass: find.spanClass
            }]
          }
        }
        return valList
      }
    },
    sortColumn() {
      return function (column) {
        let c = Object.assign([], column)
        c = c.sort((a, b) => {
          return b.sort - (a.sort || 0)
        })
        return c
      }
    },
    getStatusItem() {
      return function (list, status, key) {
        let find = list.find(item => {
          return item.id === status
        })
        return find ? find[key] : null
      }
    },
    /**
     * 判断表格操作按钮是否显示
     * @returns {(function(*=, *=): (boolean))|*}
     */
    tableBtnIsShow() {
      return function (item, row) {
        if ((Object.prototype.hasOwnProperty.call(item, 'powerKey') && !this.hasPagePowerKey(item.powerKey)) || (Object.prototype.hasOwnProperty.call(item, 'vIf') && !item.vIf(row))) {
          return false
        }
        return true
      }
    },

    /**
     * 判断表格多选操作按钮是否显示
     * @returns {(function(*=, *): (boolean))|*}
     */
    tableMutipleBtnIsShow() {
      return function (item) {
        if (Object.prototype.hasOwnProperty.call(item, 'powerKey') && !this.hasPagePowerKey(item.powerKey)) {
          return false
        }
        return true
      }
    },

    hasSearchItem () {
      return function (column) {
        return column.find(item => {
          return item.search && item.search.show
        })
      }
    },

    getSearchDateType () {
      return function (type) {
        let dateType;
        switch (type) {
          case 'date':
          case 'dates':
          case 'daterange':
            dateType = 'daterange';
            break;
          case 'datetime':
          case 'datetimerange':
            dateType = 'datetimerange';
            break;
          case 'year':
            dateType = 'year';
            break;
          case 'month':
          case 'monthrange':
            dateType = 'monthrange';
            break;
          default:
            dateType = 'daterange';
        }
        return dateType;
      }
    }
  },
  setup(props, that) {
    const submitType = ref("add")
    const {proxy} = getCurrentInstance()
    const tableHeightRef = ref(props.tableHeight)
    // let formRules = reactive({})
    // let tableForm = reactive({})
    // let searchForm = reactive({})
    let pageLoading = ref(true);
    let detailLoading = ref(false);
    let formLoading = ref(false);
    let showDialog = ref(false);
    let searchResult = ref({});
    let tableData = ref(props.data || []);
    let selectData = ref([]);
    let labelInputVal = ref();
    let isFullScreen = ref(false)
    let labelInitColors = ref([
      {bgColor: "#67c23a", color: "#fff"},
      {bgColor: "#909399", color: "#fff"},
      {bgColor: "#e6a23c", color: "#fff"},
      {bgColor: "#f56c6c", color: "#fff"},
      {bgColor: "#6739b6", color: "#fff"},
      {bgColor: "#9c26b0", color: "#fff"},
      {bgColor: "#e03997", color: "#fff"},
      {bgColor: "#1cbbb4", color: "#fff"},
      {bgColor: "#a5673f", color: "#fff"},
      {bgColor: "#f0f9eb", color: "#67c23a"},
      {bgColor: "#fdf6ec", color: "#e6a23c"},
      {bgColor: "#fef0f0", color: "#f56c6c"},
      {bgColor: "#fde6d2", color: "#f37b1d"},
      {bgColor: "#e8f4d9", color: "#8dc63f"},
      {bgColor: "#d7f0db", color: "#39b54a"},
      {bgColor: "#d2f1f0", color: "#1cbbb4"},
      {bgColor: "#cce6ff", color: "#0081ff"},
      {bgColor: "#e1d7f0", color: "#6739b6"},
      {bgColor: "#ebd4ef", color: "#9c26b0"},
      {bgColor: "#f9d7ea", color: "#e03997"},
    ])

    const config = reactive(Object.assign({
      addBtn: true,
      hiddenHandleMenu: false,
      handleColumnFixed: "right",
      'empty-text': "暂无数据",
      columnEmptyText: "",
      rowKey: "id",
      showRefresh: true,
      showFullScreen: true,
      hiddenSearchBar: false
    }, props.option));

    if (!config.page) config.page = {}
    if (!config.form) config.form = {}
    if (!config.api) config.api = {}
    if (!config.column) config.column = []
    if (!config.handleBtnList) {
      config.handleBtnList = [
        {
          key: "edit",
          dbClickDefault: true
        },
        {
          key: "delete",
        }
      ]
    }
    if (config.handleBtnList) {
      let btnConfig = {
        key: null,
        label: null,
        icon: null,
        show: true,
        type: "text",
        dbClickDefault: false
      }
      for (let i = 0; i < config.handleBtnList.length; i++) {
        switch (config.handleBtnList[i].key) {
          case "edit":
            config.handleBtnList[i] = Object.assign({}, btnConfig, {
              label: "编辑",
              icon: "el-icon-edit-outline",
              dbClickDefault: true
            }, config.handleBtnList[i])
            break
          case "delete":
            config.handleBtnList[i] = Object.assign({}, btnConfig, {
              label: "删除",
              icon: "el-icon-delete"
            }, config.handleBtnList[i])
            break
          default:
            config.handleBtnList[i] = Object.assign({}, btnConfig, config.handleBtnList[i])
            break
        }
      }
    }
    if (!config.multipleBtnList) {
      config.multipleBtnList = [
        {
          key: "delete",
        }
      ]
    }

    config.import = Object.assign({
      show: false,
      tempFilePath: null
    }, config.import || {})
    config.status = Object.assign({
      show: false,
      list: [
        {
          id: "wait",
          label: "待审核",
          class: "waitStatus"
        },
        {
          id: "doing",
          label: "审核中",
          class: "doingStatus"
        },
        {
          id: "success",
          label: "审核通过",
          class: "successStatus"
        },
        {
          id: "refuse",
          label: "未通过审核",
          class: "refuseStatus"
        }]
    }, config.status || {})
    if (config.form && config.form.width) config.form.width = parseInt(config.form.width)
    config.form = Object.assign({
      size: "small",
      width: 800,
      closeOnClickModel: false,
      closeOnPressEscape: false,
      labelWidth: 80
    }, config.form || {})
    config.api = Object.assign({
      search: {key: null, dataKey: null, totalKey: null},
      delete: {key: null, dataKey: "ids"},
      update: {key: null},
      add: {key: null},
      detail: {key: null, open: true, dataKey: "data", idKey: "id"}
    }, config.api)
    config.page = Object.assign({
      show: true,
      small: false,                 // 是否使用小型分页样式
      layout: 'total, prev, pager, next, jumper, sizes', // 组件布局，子组件名用逗号分隔
      background: true,            // 是否为分页按钮添加背景色
      pageSize: 20,              // 每页显示条目个数，支持 v-model 双向绑定
      pageSizes: [10, 20, 50, 100, 200],  //可选每页条数
      total: 0,                  // 总条目数
      pageCount: 7,             // 页码按钮的数量，当总页数超过该值时会折叠
      'current-page': 1,            // 当前页数，支持 v-model 双向绑定
      disabled: false,              // 	是否禁用
      'hide-on-single-page': false, // 只有一页时是否隐藏
      'prev-text': null,            // 替代图标显示的上一页文字
      'next-text': null,            // 替代图标显示的下一页文字
      emptyText: "暂无数据",        // 空数据时显示的文本内容
      preventAuto: false
    }, config.page || {})

    let {
      formRules,
      tableForm,
      searchForm,
      evalColumnMethods,
      onChangeSelectEvent,
      onRemoteMethodEvent
    } = TableStepMixin(config, proxy)

    const reload = function (page = 0, auto) {
      if (auto && config.page.preventAuto) {
        config.page.preventAuto = false
        return
      }


      if (page < 0) page = 0;
      if (that.attrs.onOnLoad) {
        pageLoading.value = true
        that.emit("onLoad", page, config.page.pageSize, searchForm, function (res) {
          pageLoading.value = false
          searchResult.value = res
          tableData.value = res.data
          config.page.total = res.total
        })
      } else {
        let searchCond = Object.assign({
          pageIndex: page,
          pageSize: config.page.pageSize
        }, searchForm)
        if (config.api.search && config.api.search.key) {
          pageLoading.value = true
          proxy.callApi(config.api.search.key, searchCond).then(res => {
            searchResult.value = res
            tableData.value = res[config.api.search.dataKey]
            config.page.total = res[config.api.search.totalKey]

            console.log("设置查询条件 fullPath:" + proxy.$route.fullPath + JSON.stringify(searchCond))
            sessionStorage.setItem("search_" + proxy.$route.fullPath, JSON.stringify(searchCond))
          }).finally(() => {
            pageLoading.value = false
          })
        } else {
          pageLoading.value = false
        }
      }
      config.page.preventAuto = true
      setTimeout(() => {
        config.page.preventAuto = false
      }, 100)
      if (config.page['current-page'] !== page + 1) config.page['current-page'] = page + 1;

      evalColumnMethods()
    }

    const pageSizeChange = (size) => {
      config.page.pageSize = size;
      reload();
    }

    const updateDialogEvent = function (row) {
      detailLoading.value = true
      if (config.api.detail && config.api.detail.open && config.api.detail.key) {
        proxy.callApi(config.api.detail.key, {
          [config.api.detail.idKey]: row[config.rowKey]
        }).then((res) => {
          tableForm = Object.assign(tableForm, res[config.api.detail.dataKey])
        }).finally(() => {
          detailLoading.value = false
        })
      } else if (that.attrs.onRowDetail) {
        that.emit("rowDetail", row, function (res) {
          tableForm = Object.assign(tableForm, res)
          detailLoading.value = false
        })
      } else {
        tableForm = Object.assign(tableForm, row)
        detailLoading.value = false
      }
      // onLoadValueFormat()

      showDialog.value = true
      submitType.value = "update"
    }

    /**
     * form对话框打开事件
     * @param data
     */
    const openDialog = function (data) {
      tableForm = Object.assign(tableForm, data)
      showDialog.value = true
      if (data && data[config.rowKey]) {
        submitType.value = "update"
        that.emit("onUpdateOpen", tableForm)
      } else {
        submitType.value = "add"
        that.emit("onAddOpen", tableForm)
      }
    }

    /**
     * form对话框关闭事件
     */
    const closeDialogEvent = function () {
      showDialog.value = false
      formLoading.value = false
      if (config.column && config.column.length) {
        // eslint-disable-next-line no-unused-vars
        tableForm[config.rowKey] = null
        config.column.forEach(column => {
          if (column.formShow || column.defaultSearch) {
            if (column.type === 'radio') {
              let defaultIndex = column.form.defaultIndex || 0
              tableForm[column.prop] = column.dicData[defaultIndex] ? column.dicData[defaultIndex][column.dicId] : null
            } else if (column.type === 'checkbox') {
              tableForm[column.prop] = []
            } else {
              tableForm[column.prop] = column.form ? column.form.default : null
            }
          }
          if (column.type === 'image') {
            if (column.form.multiple) {
              tableForm[config.rowKey] = []
            }
            if (column.url) {
              tableForm[column.url] = null
            }
          }
        })
      }
    }

    /**
     * form对话框打开事件
     **/
    const openDialogEvent = function (){
      if (that.attrs.onFormOpen) {
        that.emit("formOpen", submitType.value)
      }
    }

    /**
     * 回车添加标签
     * @param prop
     * @param labelColor
     */
    const onConfirmAddLabelEvent = function (prop, labelColor) {
      if (!tableForm[prop]) tableForm[prop] = []
      if (labelInputVal.value) {
        if (labelColor) {
          tableForm[prop].push({
            label: labelInputVal.value,
            bgColor: "#f0f2f5",
            color: "#606266"
          })
        } else {
          tableForm[prop].push(labelInputVal.value)
        }
        labelInputVal.value = ""
      }
    }

    /**
     * 选择地址组件回调
     * @param e
     */
    const onSelectLocationEvent = function (e) {
      tableForm[e.key] = e.val
    }

    /**
     * 表格复选事件
     * @param data
     */
    const onTableSelectionChangeEvent = function (data) {
      selectData.value = data
      that.emit("onTableSelection", data)
    }

    const onTableRowDbClickEvent = function (row) {
      if (config.hiddenHandleMenu) return;
      let findDefault = config.handleBtnList.find(item => {
        return item.show && item.dbClickDefault
      })
      if (findDefault && proxy.tableBtnIsShow(findDefault, row)) {
        switch (findDefault.key) {
          case "edit":
            updateDialogEvent(row)
            break
          case "delete":
            onDeleteEvent(row)
            break
          default:
            findDefault.callback(row)
            break
        }
      }
    }

    /**
     * 文件导入事件
     * @param file
     * @param func
     */
    const onImportEvent = function (file, func) {
      that.emit("onImport", file, function (e) {
        reload()
        func(e)
      })
    }

    /**
     * 单项数据删除事件
     * @param item
     */
    const onDeleteEvent = function (item) {
      proxy.$confirm('确定删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (that.attrs.onRowDel) {
          that.emit("rowDel", [item[config.rowKey]], function () {
            reload(config.page['current-page'] - 1)
          })
        } else if (config.api.delete && config.api.delete.key) {
          proxy.callApi(config.api.delete.key, {
            [config.api.delete.dataKey]: [item[config.rowKey]]
          }).then(() => {
            reload(config.page['current-page'] - 1)
          })
        } else {
          proxy.$message.error("接口未配置")
        }
      })
    }

    /**
     * 多选删除事件
     */
    const onDeleteManyEvent = function () {
      proxy.$confirm('确定删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = []
        selectData.value.forEach(d => {
          ids.push(d[config.rowKey])
        })
        if (that.attrs.onRowDel) {
          that.emit("rowDel", ids, function () {
            reload(config.page['current-page'] - 1)
          })
        } else if (config.api.delete && config.api.delete.key) {
          proxy.callApi(config.api.delete.key, {
            [config.api.delete.dataKey]: ids
          }).then(() => {
            reload(config.page['current-page'] - 1)
          })
        } else {
          proxy.$message.error("接口未配置")
        }
      })
    }

    const onMultipleHandleEvent = function (handle) {
      let ids = []
      selectData.value.forEach(d => {
        ids.push(d[config.rowKey])
      })
      if (handle.callback) handle.callback(ids)
    }

    const onClickColumnEvent = function (column, row) {
      if (column.callBack) {
        column.callBack(column, row)
      }
    }


    // const onLoadValueFormat = function () {
    //   for (let i = 0; i < config.column.length; i++) {
    //     if (Object.prototype.hasOwnProperty.call(tableForm, config.column[i].prop)) {
    //       switch (config.column[i].type) {
    //         case "date":
    //           tableForm[config.column[i].prop] = new Date(tableForm[config.column[i].prop])
    //           break
    //       }
    //     }
    //   }
    // }
    //
    // const onSubmitValueFormat = function () {
    //   for (let i = 0; i < config.column.length; i++) {
    //     if (Object.prototype.hasOwnProperty.call(tableForm, config.column[i].prop)) {
    //       switch (config.column[i].type) {
    //         case "date":
    //           if (config.column[i].form.valueFormat) {
    //             tableForm[config.column[i].prop] = dayjs(tableForm[config.column[i].prop]).format(config.column[i].form.valueFormat)
    //           }
    //           break
    //       }
    //     }
    //   }
    // }

    /**
     * 表单提交事件
     */
    const onSubmitEvent = function () {
      proxy.$refs.form.validate((valid) => {
        if (valid) {
          formLoading.value = true
          // onSubmitValueFormat()
          if (submitType.value === 'update') {
            if (that.attrs.onRowUpdate) {
              that.emit("rowUpdate", tableForm, function () {
                formLoading.value = false
                onRowChanged()
                closeDialogEvent()
                reload(config.page['current-page'] - 1)
              })
            } else if (config.api.update && config.api.update.key) {
              proxy.callApi(config.api.update.key, tableForm).then(() => {
                onRowChanged()
                closeDialogEvent()
                reload(config.page['current-page'] - 1)
              }).finally(() => {
                formLoading.value = false
              })
            } else {
              proxy.$message.error("接口未配置")
              formLoading.value = false
            }
          } else {
            if (that.attrs.onRowSave) {
              that.emit("rowSave", tableForm, function () {
                formLoading.value = false
                onRowChanged()
                closeDialogEvent()
                reload()
              })
            } else if (config.api.add && config.api.add.key) {
              proxy.callApi(config.api.add.key, tableForm).then(() => {
                onRowChanged()
                closeDialogEvent()
                reload()
              }).finally(() => {
                formLoading.value = false
              })
            } else {
              proxy.$message.error("接口未配置")
              formLoading.value = false
            }
          }
        }
      });
    }

    /**
     * 新增、更新后操作
     */
    const onRowChanged = () => {
      if (!that.attrs.onRowChanged) return;
      that.emit("rowChanged", tableForm);
    }

    /**
     * 根据字段获取内容（字段中允许包含.）
     **/
    const getLabelByPropKey = function (row, item) {
      if (!item.showProp && !item.prop) return null;
      let keys = (item.showProp || item.prop).split(".")
      keys.forEach(k => {
        if (row) row = row[k]
      })
      return row || item.emptyText || config.columnEmptyText
    }

    const changeFullscreenEvent = function () {
      isFullScreen.value = !isFullScreen.value
      proxy.getTableHeight()
    }


    onMounted(() => {
      let preCondStr = sessionStorage.getItem("search_" + proxy.$route.fullPath)
      console.log("获取查询条件 fullPath:" + proxy.$route.fullPath + preCondStr)
      if (preCondStr) {
        let preCond = JSON.parse(preCondStr)
        let defaultIndex = preCond.pageIndex
        let pageSize = preCond.pageSize
        delete preCond.pageIndex
        delete preCond.pageSize
        Object.assign(searchForm, preCond)
        config.page.pageSize = pageSize
        setTimeout(() => {
          reload(defaultIndex)
        }, 100)
      } else {
        reload(0)
      }
    })

    /*-------------------------暴露接口方法---------------------------*/
    const setColumnDicDataByProp = function (prop, dicData) {
      let find = config.column.find(item => {
        return item.prop === prop
      })
      if (find) find.dicData = dicData
    }
    const setFormValueByProp = function (prop, val) {
      if (tableForm.hasOwnProperty(prop)){
        tableForm[prop] = val
      }
    }
    const setConfigByKey = function (key, value) {
      if (config[key]) config[key] = value
    }
    const setTableData = function (data) {
      tableData.value = data
    }

    return {
      config,
      submitType,
      showDialog,
      tableForm,
      searchForm,
      formRules,
      searchResult,
      tableData,
      selectData,
      pageLoading,
      isFullScreen,
      detailLoading,
      formLoading,
      labelInputVal,
      labelInitColors,
      tableHeightRef,
      reload,
      pageSizeChange,
      getLabelByPropKey,
      openDialog,
      onImportEvent,
      onSubmitEvent,
      onDeleteEvent,
      openDialogEvent,
      closeDialogEvent,
      updateDialogEvent,
      onDeleteManyEvent,
      onClickColumnEvent,
      onRemoteMethodEvent,
      onChangeSelectEvent,
      changeFullscreenEvent,
      onMultipleHandleEvent,
      onSelectLocationEvent,
      onConfirmAddLabelEvent,
      onTableRowDbClickEvent,
      onTableSelectionChangeEvent,

      setTableData,
      setFormValueByProp,
      setColumnDicDataByProp,
      setConfigByKey
    }
  },
  mounted() {
    let self = this
    $(window).resize(function () {
      self.getTableHeight()
    })
    self.getTableHeight()
  },
  methods: {
    bindData() {
      return this
    },
    /**
     * 获取表格高度
     */
    getTableHeight() {
      let self = this
      self.$nextTick(() => {
        let tablePlugHeight = self.isFullScreen? ($(window).height() - 20) : $(self.$refs[self.pageId]).height()
        let topHeight = $(self.$refs[self.pageId]).find(".top").height()
        let footerHeight = $(self.$refs[self.pageId]).find(".footer").height()
        self.calcTableHeight = tablePlugHeight - (topHeight || 0) - (footerHeight || 0)
      })
    }
  },
  watch: {}
}
</script>
<style scoped lang="scss">
.TablePlug {
  width: 100%;
  display: flex;
  height: calc(100% - 20px);
  flex-direction: column;
  padding: 10px 0;

  &.is-full-screen{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    z-index: 1111;
  }

  .top {
    display: flex;
    min-height: 40px;
    align-items: center;
    flex-shrink: 0;

    .top_btn {
    }

    .top_search {
      flex: 1;
      display: flex;
      flex-flow: wrap row;
      align-items: center;

      .top_search_btn {
        margin: 5px 0 5px 0;
        :deep(.is_tool_btn){
          width: 34px;
          padding: 0;
          margin-right: 10px
        }

        :deep(.el-button) {
          height: 100%;
        }
      }

      .top_search_span {
        display: flex;
        align-items: center;
        margin: 5px 10px 5px 0;
        border-radius: 4px;
        border: 1px solid #DCDFE6;

        &:hover {
          border-color: var(--primary);
        }

        .top_search_span_label {
          font-size: 12px;
          padding-left: 10px;
          color: var(--font-hb);
        }

        .top_search_span_input {
          :deep(input),
          :deep(.el-select) {
            width: 100%;
            border: 0;
            font-family: "vbl";
          }
          :deep(.date-picker) {
            width: auto;
            background-color: transparent;
            border: 0;
            &.el-date-editor--daterange {
              width: 260px;
            }
            &.el-date-editor--datetimerange {
              width: 360px;
            }
            &.el-date-editor--year {
              width: 130px;
            }
            &.el-date-editor--monthrange {
              width: 200px;
            }
          }
        }
      }
    }
  }

  .center {
    flex: 1;
    flex-shrink: 1;
  }

  .footer {
    width: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 5px !important;

    .footer_btn {
      flex: 1;
      text-align: left;
      display: flex;
    }

    .footer_page {
      flex: 1;
      text-align: right;
    }
  }
}

.tableForm {
  width: 100%;

  .split {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-bd);
    margin-bottom: 20px;
    margin-top: 10px;
    padding-left: 20px;

    &:first-child {
      margin-top: 0;
    }

    .split_icon {
    }

    .split_label {
      font-size: 16px;
      font-weight: bold;
      color: var(--font-ha);
    }
  }

  :deep(.el-form-item) {
    .el-input__inner[type='number'] {
      padding-right: 0;
    }
  }
}

.tableFoolter {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tableBtn {
  font-size: 12px !important;
  min-height: auto !important;
  padding: 0 !important;

  &.deleteBtn {
    color: var(--danger)
  }
}

.tableEmpty {
  text-align: center;

  .tableEmpty_img {
    background-image: url("../../../img/ch/e98.png");
    width: 200px;
    height: 133px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
  }

  .tableEmpty_label {
  }
}

.tableIcon {
  font-size: 16px;
  color: var(--primary);
}

.tableImage {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  img {
    max-width: 100%;
    max-height: 100%;
  }
}

.showColumnList {
  .showColumnList_title {
    font-size: 12px;
    color: var(--font-hb);
  }

  .showColumnList_li {
    padding: 5px 0;
  }
}

.labelsPanel {
  display: flex;
  width: 100%;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  flex-flow: row wrap;

  .labelsPanel_list {
    display: flex;
    flex-flow: row wrap;

    .labelsPanel_list_span {
      background-color: #f0f2f5;
      color: var(--font-hb);
      margin: 4px;
      border-radius: 4px;
      padding: 0 5px;
      height: 24px;
      cursor: pointer;

      .labelsPanel_list_span_b {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
      }

      .labelsPanel_list_span_label {
        font-size: 12px;
        margin-right: 5px;
      }

      .labelsPanel_list_span_close {
        color: var(--font-hd);
        cursor: pointer;

        &:hover {
          color: var(--danger);
        }
      }
    }
  }

  .labelsPanel_input {
    flex: 1;

    :deep(.el-input) {
      width: 100%;
      height: 100% !important;
    }

    :deep(input) {
      border: 0 !important;
      border-radius: 0 !important;
      height: 100%;
      padding-left: 10px !important;
      background: transparent !important;
    }
  }
}

.labelsTablePanel {
  display: flex;
  flex-flow: wrap row;

  .labelsTablePanel_span {
    background-color: #f0f2f5;
    color: var(--font-hb);
    margin: 4px;
    border-radius: 4px;
    padding: 0 5px;
    height: 24px;
    cursor: pointer;
    font-size: 12px;
  }
}
</style>
